Quiero hacer una lista de libros en JavaScript, y primero hice el código para que se imprimiera en la ventana de la consola, pero ahora quiero tener la lista en la página web, porque a través de un evento DOM (botón) quiero el usuario poder poner otro libro en la lista. Con ciertos criterios. Pero ahora, cuando trato de ponerlo en la web, solo obtengo objeto objeto] [objeto objeto], y dado que soy un novato, no entiendo cómo fusionar, por lo que la lista que hice con JavaScript se muestra en la página web. Perdón si esto es confuso.
var array = [{ "Title": "Machine Learning", "Year": 2020, "Price": 500 }, { "Title": "Artificial Intelligence", "Year": 2020, "Price": 1100 }, { "Title": "Algorithms and Data Structure", "Year": 1995, "Price": 400 }, { "Title": "Programming in C++", "Year": 1999, "Price": 200 }, { "Title": "Database Systems", "Year": 2020, "Price": 500 }]; document.getElementById("test").innerHTML = array for (var i = 0; i < array.length; i++) { console.log(array[i]) } <h1>Velkommen til mitt arbeidskrav i emnet: </h1> <h1>Intro til programmering! </h1> <div id="test"> </div> <input id="NewBook" placeholder="Enter book"></input> <button id="btnNewBook">Click to add book</button> <p> My book list: <ul id="MyBookList"> </ul>Lo que está tratando de mostrar en la página web es solo una matriz (Objeto). Debe recorrer esa matriz y mostrar el título del elemento, no the item .
const el = document.getElementById("test"); for (var i = 0; i < array.length; i++) { el.innerHTML += `<div>${array[i].Title}</div>`; } También un consejo: en lugar de reconstruir el dom con innerHTML, podría pensar en usar las funciones appendChild o insertAdjacentHTML .